<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="/static/layer/theme/default/layer.css">
    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/vue.global.js"></script>
    <script src="/static/layer/layer.js"></script>
    <title>用户注册</title>

</head>
<body>

{% include 'commonNav.html' %}

<article>
    <!-- 网站主体 -->
    <div id="main">
        <section class="ct">
            <!-- 上传表单-->
            <div class="upload">
                <h1>用户注册①<em>填写信息、完成用户注册第一步。已有账号，请点击<a href="/login">登录</a></em></h1>
                <!-- 注册步骤导航-->
                <div class="reg_step">
                    <a class="step">注册信息</a><a class="step2">基本信息</a><a class="step2">注册完成</a>
                </div>

                <form enctype="application/x-www-form-urlencoded">

                    <p>
                        <label>手机号：</label>
                        <input class="upt" type="text" name="username" v-model.trim="username" value=""/>
                        <em></em>
                    </p>
                    <p>
                        <label>密码：</label>
                        <input class="upt" type="password" name="password" v-model.trim="password" value=""
                               placeholder="密码长度为6-20位"/>
                        <em></em>
                    </p>
                    <p>
                        <label>确认密码：</label>
                        <input class="upt" type="password" value="" v-model.trim="confirmPassword"
                               placeholder="请再次输入密码"/>
                        <em></em>
                        <span class="source-tag-msg">两次输入的密码必须保持一致</span>
                    </p>

                    <p>
                        <label>电子邮箱：</label>
                        <input id="email" class="upt" type="text" name="email" v-model.trim="email" value=""
                               placeholder="请输入邮箱"/>
                        <em></em>
                        <span class="source-tag-msg">您丢失密码后找回密码的凭证</span>
                    </p>

                    <p><a class="btn" @click="registerHandler">注册</a></p>
                </form>
            </div>
        </section>
    </div>
</article>
<footer>
    <p class="decro">本站所有资源信息均由网友上传,本站只是为了推广资源让更多读者下载,使用。如涉侵权，请联系管理员</p>
    <p class="cr">Copyright © 2021-2025 <span class="site">爱下载资源分享平台</span> All Rights Reserved.</p>
    <p class="num">沪ICP备14048333号</p>
</footer>


<script>
    Vue.createApp({
        data() {
            return {
                username: '',
                password: '',
                confirmPassword: '',
                email: '',
            }
        },
        methods: {
            registerHandler() {
                if (!this.username) {
                    layer.msg('手机号不允许为空', {icon: 5});
                    return;
                }
                if (!/^1[3-9]\d{9}$/.test(this.username)) {
                    layer.msg('手机号格式不正确', {icon: 5});
                    return;
                }
                if (!this.password) {
                    layer.msg('密码不允许为空', {icon: 5});
                    return;
                }
                if (this.password.length < 6 || this.password.length > 20) {
                    layer.msg('密码长度为6-20位', {icon: 5});
                    return;
                }
                if (this.password !== this.confirmPassword) {
                    layer.msg('两次输入的密码不一致', {icon: 5});
                    return;
                }
                if (!this.email) {
                    layer.msg('电子邮箱不允许为空', {icon: 5});
                    return;
                }
                if (!/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(this.email)) {
                    layer.msg('电子邮箱格式不正确', {icon: 5});
                    return;
                }
                // 产生一个 loading 效果
                const index = layer.load(2)
                axios.post('/register', {
                    username: this.username,
                    password: this.password,
                    email: this.email
                }, {headers: {"Content-Type": "application/x-www-form-urlencoded"}}).then(res => {
                    if (res.data.code === 200) {
                        layer.msg('注册成功，请完善基本信息', {icon: 6, time: 2000}, () => {
                            window.location.href = `/register2?uid=${res.data.uid}&sign=${res.data.sign}`;
                        });
                    } else {
                        layer.msg(res.data.message, {icon: 5});
                    }
                }).catch(err => {
                    console.error(err);
                    layer.msg('请求失败，请稍后重试', {icon: 5});
                }).finally(() => {
                    layer.close(index);
                })
            }
        }
    }).mount("#main")

</script>

</body>

</html>